<script>
import { requestGet } from '@/api/system/common'
export default {
  name: 'PcNoticeSlot',
  props: {
    content: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      dataList: []
    }
  },
  watch: {
    content: {
      handler(newData, oldData) {
        console.log(newData)
        this.initData(newData.sjly.id)
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    initData(id) {
      requestGet('rest/api/temp/v2/column/analysis/sjx/pager', { sjx: id, page: 1, rows: 3 })
        .then((res) => {
          const { data } = res
          if (undefined !== data.dataList && data.dataList !== null) {
            this.dataList = data.dataList
            if (this.isRefresh === true) {
              this.timer = setTimeout(this.initData, this.refreshTime * 1000)
            }
          } else if (undefined !== data.data && data.data !== null) {
            this.dataList = data.data
            if (this.isRefresh === true) {
              this.timer = setTimeout(this.initData, this.refreshTime * 1000)
            }
          }
        })
        .catch(() => {
          this.dataList = []
        })
    },
    // 点击详情页
    openEntity(data) {
      console.log(this.content)
      const entity = {
        isOpenEntity: true, // 是否打开详情页
        entityParams: '', // 详情页查询参数
        params: '', // 详情页打开方式为地址参数时，参数设置
        openType: 1, // 详情页打开方式
        url: this.content.url, // 详情地址
        temp: '', // 详情模版
        entity: data, // 详情数据
        title: '详情' // 标题
      }
      this.$bus.emit('openEntity', { data: entity })
      /* let title = ''
      if (this.setting.isFixTitle) {
        title = this.setting.entityTitle
      } else {
        title = data[this.setting.entityTitleCode]
      }
      const entity = {
        isOpenEntity: this.setting.isOpenEntity, // 是否打开详情页
        entityParams: this.setting.entityParams, // 详情页查询参数
        params: this.setting.params, // 详情页打开方式为地址参数时，参数设置
        openType: this.setting.entityOpenType, // 详情页打开方式
        url: this.setting.entityUrl, // 详情地址
        temp: this.setting.entityTemp, // 详情模版
        entity: data, // 详情数据
        title: title // 标题
      }
      this.$bus.emit('openEntity', { data: entity })*/
    }
  }
}
</script>

<template>
  <div class="custom-slot-body">
    <div class="custom-title-header">
      <div class="item-image">
        <el-image :src="baseURL + content.tb" />
      </div>
      <div class="item-title">{{ content.label }}</div>
    </div>
    <div v-if="dataList" class="custom-ul">
      <div v-for="(item, index) in dataList" :key="index" class="custom-ul-li" @click="openEntity(item)">
        <div class="li-span">
          <span />
        </div>
        <div class="li-title">{{ item[content.title] }}</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.custom-slot-body {
  width: 100%;
  height: auto;
  padding: 10px 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  font-size: 0.9rem;
  .custom-title-header {
    width: 100%;
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .item-image {
      width: 30px;
      height: 30px;
      padding: 5px;
      box-sizing: border-box;
      .el-image {
        width: 100%;
      }
    }
    .item-title {
      font-weight: 550;
    }
  }
  .custom-ul {
    width: 100%;
    height: auto;
    .custom-ul-li {
      width: 100%;
      height: 40px;
      position: relative;
      display: flex;
      flex-flow: row nowrap;
      .li-span {
        width: 30px;
        height: 100%;
        padding: 0 14px;
        box-sizing: border-box;
        position: relative;
        span {
          background: var(--edu-border-100);
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .li-title {
        font-size: 0.9rem;
        color: var(--edu-text-300);
        cursor: pointer;
        flex: 1 1;
        overflow: hidden;
      }
    }
    .custom-ul-li:not(:first-child):after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: var(--edu-border-100);
      left: 10px;
      top: 3px;
    }
  }
}
</style>
